class PodFileBrowser {
  constructor() {
    this.currentNamespace = "";
    this.currentPod = "";
    this.currentContainer = "";

    this.init();
  }

  async init() {
    await this.loadNamespaces();
    this.setupEventListeners();
  }

  async loadNamespaces() {
    const namespaceList = document.getElementById("namespaces");
    namespaceList.textContent = "Loading...";
    try {
      const response = await fetch("/api/namespaces");
      const data = await response.json();
      if (data.status === "success") {
        this.renderNamespaces(data.data);
      }
    } catch (error) {
      console.error("Failed to load namespaces:", error);
      namespaceList.textContent = "Load failed, please try again";
    }
  }

  renderNamespaces(namespaces) {
    const namespaceList = document.getElementById("namespaces");
    namespaceList.innerHTML = "";
    namespaces.forEach((ns) => {
      const listItem = document.createElement("li");
      listItem.textContent = ns.name;
      listItem.addEventListener("click", () => {
        this.resetSelection();
        listItem.classList.add("selected");
        this.loadPods(ns.name);
      });
      namespaceList.appendChild(listItem);
    });
  }

  async loadPods(namespace) {
    const podList = document.getElementById("pods");
    podList.textContent = "Loading...";
    this.currentNamespace = namespace;
    try {
      const response = await fetch(`/api/namespaces/${namespace}/pods`);
      const data = await response.json();
      if (data.status === "success") {
        this.renderPods(data.data);
      }
    } catch (error) {
      console.error("Failed to load pods:", error);
      podList.textContent = "Load failed, please try again";
    }
  }

  renderPods(pods) {
    const podList = document.getElementById("pods");
    podList.innerHTML = "";
    pods.forEach((pod) => {
      const listItem = document.createElement("li");
      listItem.textContent = pod.name;
      listItem.addEventListener("click", () => {
        this.resetSelection("pods");
        listItem.classList.add("selected");
        this.loadContainers(pod.name);
      });
      podList.appendChild(listItem);
    });
  }

  async loadContainers(podName) {
    const containerList = document.getElementById("containers");
    containerList.textContent = "Loading...";
    this.currentPod = podName;
    try {
      const response = await fetch(
        `/api/namespaces/${this.currentNamespace}/pods/${podName}/containers`
      );
      const data = await response.json();
      if (data.status === "success") {
        this.renderContainers(data.data);
      }
    } catch (error) {
      console.error("Failed to load containers:", error);
      containerList.textContent = "Load failed, please try again";
    }
  }

  renderContainers(containers) {
    const containerList = document.getElementById("containers");
    containerList.innerHTML = "";
    containers.forEach((container) => {
      const listItem = document.createElement("li");
      listItem.textContent = container.name;
      listItem.addEventListener("click", () => {
        this.resetSelection("containers");
        listItem.classList.add("selected");
        this.showContainerDetails(container.name);
      });
      containerList.appendChild(listItem);
    });
  }

  showContainerDetails(containerName) {
    this.currentContainer = containerName;
    console.log(`Mounting the filesystem of container ${containerName}`);
    const mountRequest = {
      namespace: this.currentNamespace,
      podName: this.currentPod,
      containerName: this.currentContainer,
    };

    fetch("/api/mount", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(mountRequest),
    })
      .then((response) => response.json())
      .then((data) => {
        if (data.status === "success") {
          console.log("Container filesystem mounted successfully");
        } else {
          console.error("Failed to mount container filesystem:", data.message);
        }
      })
      .catch((error) =>
        console.error("Error fetching container details:", error)
      );
  }

  setupEventListeners() {
    // Additional event listeners can be added here
  }

  resetSelection(level) {
    if (!level || level === "namespaces") {
      const namespaceItems = document.querySelectorAll("#namespaces li");
      namespaceItems.forEach((item) => item.classList.remove("selected"));
    }
    if (!level || level === "pods") {
      const podItems = document.querySelectorAll("#pods li");
      podItems.forEach((item) => item.classList.remove("selected"));
    }
    if (!level || level === "containers") {
      const containerItems = document.querySelectorAll("#containers li");
      containerItems.forEach((item) => item.classList.remove("selected"));
    }
  }
}

// Initialize
document.addEventListener("DOMContentLoaded", () => {
  window.podFileBrowser = new PodFileBrowser();
});
